<template>
  <DragForm
    class="_fc-validate"
    :rule="rule"
    :option="option"
    :modelValue="formValue"
    @update:modelValue="onInput"
  />
</template>

<script>
import { designerForm } from "../utils/form";
import { defineComponent } from "vue";
import { deepCopy } from "@form-create/utils/lib/deepextend";

export default defineComponent({
  name: "Validate",
  inject: ["designer"],
  props: {
    modelValue: Array,
  },
  components: {
    DragForm: designerForm.$form(),
  },
  watch: {
    modelValue(n) {
      this.formValue = this.parseValue(n);
    },
  },
  data() {
    const t = this.designer.setupState.t;
    return {
      formValue: {},
      t,
      option: {
        form: {
          labelPosition: "top",
          size: "small",
          labelWidth: "90px",
          layout: "vertical",
        },
        submitBtn: false,
        appendValue: true,
        formData: this.parseValue(this.modelValue),
      },
      rule: [
        {
          type: "select",
          field: "type",
          value: "",
          title: t("validate.type"),
          options: [
            { value: "", label: t("validate.typePlaceholder") },
            { value: "string", label: "String" },
            { value: "array", label: "Array" },
            { value: "number", label: "Number" },
            { value: "integer", label: "Integer" },
            { value: "float", label: "Float" },
            { value: "object", label: "Object" },
            { value: "date", label: "Date" },
            { value: "url", label: "url" },
            { value: "hex", label: "hex" },
            { value: "email", label: "email" },
          ],
          control: [
            {
              handle: (v) => {
                return !!v;
              },
              rule: [
                {
                  type: "group",
                  field: "validate",
                  props: {
                    expand: 1,
                    sortBtn: false,
                    rule: [
                      {
                        type: "select",
                        title: t("validate.trigger"),
                        field: "trigger",
                        value: "change",
                        options: [
                          { label: "change", value: "change" },
                          { label: "submit", value: "submit" },
                          { label: "blur", value: "blur" },
                        ],
                      },
                      {
                        type: "hidden",
                        field: "validator",
                        value: undefined,
                      },
                      {
                        type: "select",
                        title: t("validate.mode"),
                        field: "mode",
                        options: [
                          {
                            value: "required",
                            label: t("validate.modes.required"),
                          },
                          {
                            value: "pattern",
                            label: t("validate.modes.pattern"),
                          },
                          { value: "min", label: t("validate.modes.min") },
                          { value: "max", label: t("validate.modes.max") },
                          { value: "len", label: t("validate.modes.len") },
                        ],
                        value: "required",
                        control: [
                          {
                            value: "required",
                            rule: [
                              {
                                type: "hidden",
                                field: "required",
                                value: true,
                              },
                            ],
                          },
                          {
                            value: "pattern",
                            rule: [
                              {
                                type: "input",
                                field: "pattern",
                                title: t("validate.modes.pattern"),
                              },
                            ],
                          },
                          {
                            value: "min",
                            rule: [
                              {
                                type: "inputNumber",
                                field: "min",
                                title: t("validate.modes.min"),
                              },
                            ],
                          },
                          {
                            value: "max",
                            rule: [
                              {
                                type: "inputNumber",
                                field: "max",
                                title: t("validate.modes.max"),
                              },
                            ],
                          },
                          {
                            value: "len",
                            rule: [
                              {
                                type: "inputNumber",
                                field: "len",
                                title: t("validate.modes.len"),
                              },
                            ],
                          },
                        ],
                      },
                      {
                        type: "input",
                        title: t("validate.message"),
                        field: "message",
                        value: "",
                        children: [
                          {
                            type: "span",
                            slot: "append",
                            inject: true,
                            class: "append-msg",
                            on: {
                              click: (inject) => {
                                const title =
                                  this.designer.setupState.activeRule.title;
                                if (this.designer.setupState.activeRule) {
                                  inject.api.setValue(
                                    "message",
                                    t(
                                      inject.api.form.mode !== "required"
                                        ? "validate.autoMode"
                                        : "validate.autoRequired",
                                      { title }
                                    )
                                  );
                                }
                              },
                            },
                            children: [t("validate.auto")],
                          },
                        ],
                      },
                    ],
                  },
                  value: [],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    onInput: function (formData) {
      let val = [];
      const { validate, type } = deepCopy(formData);
      if (type && (!validate || !validate.length)) {
        return;
      } else if (type) {
        validate.forEach((v) => {
          v.type = type;
        });
        val = [...validate];
      }
      this.$emit("update:modelValue", val);
    },
    parseValue(n) {
      let val = {
        validate: n ? [...n] : [],
        type: n.length ? n[0].type || "string" : undefined,
      };
      val.validate.forEach((v) => {
        if (!v.mode) {
          Object.keys(v).forEach((k) => {
            if (["message", "type", "trigger", "mode"].indexOf(k) < 0) {
              v.mode = k;
            }
          });
        }
      });

      return val;
    },
  },
});
</script>

<style>
._fc-validate .form-create .el-form-item {
  margin-bottom: 22px !important;
}

._fc-validate .append-msg {
  cursor: pointer;
}

._fc-validate .el-input-group__append {
  padding: 0 10px;
}
</style>
